<template>
  <div>
       <common-head :title="$route.name"/>
       <div class="container">
           <div class="item-sort">
        <div @click="sortBy(0)" :class="['sort','sale',{
          active: sort.by === 0
        }]"><!-- 数组代表多个类 -->
          <span>销量</span>
        </div>
        <div
          @click="sortByPrice"
          :class="['sort','price',{
          active: sort.by === 1
        }]">
          <span>价格</span>
          <div :class="['angle', 'up', {
            active: sort.by === 1 && sort.upDown === 0
          }]"></div>
          <div :class="['angle', 'down', {
            active: sort.by === 1 && sort.upDown === 1
          }]"></div>
        </div>
        <div  @click="sortBy(2)" :class="['sort','new',{
          active: sort.by === 2
        }]">
          <span>新品</span>
        </div>
      </div>
      <div class="items">
      <div class="item" @click="clickItem(item.id)" v-for="item in items" :key="item.id">
         <div class="item-info">
           <img :src="item.pic" class="item-img" >
         </div>
           <div class="item-action">
              <h3>{{item.name}}</h3>
            <div class="price">
              ￥{{item.minPrice}}
            </div>
          </div>
      </div>
    </div>
       </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from '_api'
export default {
  components: { CommonHead },
  name: 'ItemList',
  data () {
    return {
      sort: {
        by: 0, // 0销量 1价格 2新品
        upDown: 0// 0升序 1 降序
      },
      items: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    clickItem (id) {
      // 点击跳转到详情页
      this.$router.push(`/detail/${id}`)
    },
    fetchItems () {
      fetchItems({
        categoryId: this.$route.query.cateId,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    sortBy (n) {
      // 点击按照 销量 和 新品排序
      this.sort.by = n
      this.fetchItems()
    },
    sortByPrice () {
      // 点击按照价格排序
      /*
        1 此时 从按照销量和新品排序 点击按照价格排序 默认 按照价格的 升序排序
        2 此时 就是按照价格排序 只是切换 升序还是降序
      */
      //  从销量和新品点击按照价格排序
      if (this.sort.by !== 1) {
        this.sort.by = 1
        this.sort.upDown = 0
      } else {
        // 按照价格排序 切换升序降序
        if (this.sort.upDown === 0) {
          this.sort.upDown = 1
        } else {
          this.sort.upDown = 0
        }
        this.fetchItems()
      }
    }
  },
  computed: {
    orderBy () {
      // 商品排序
      let orderBy = 'ordersDown'
      switch (this.sort.by) {
        case 0:
          // 按照销量降序排序
          orderBy = 'ordersDown'
          break
        case 1:
          // 按照价格 判断升序还是降序
          if (this.sort.upDown === 0) {
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          // 按照发布时间
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding-top: 46px;
  .items{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item{
  width: 10.93rem;
  height: 17.5rem;
  background-color: white;
  border-radius: 10px 10px 10px 10px;
  margin: 8px;
  padding-left: 5px;
  img{
    width: 8rem;
    height: 8rem;
    padding: 23px;
  }
  h3{
    font-weight: 500;
    padding-bottom: 10px;
   white-space: nowrap;
   text-overflow:ellipsis;
   overflow: hidden;
  }
  .price{
    color: #fd3f3f;
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight:bold ;

  }
}
  .item-sort{
      height: 2.25rem;
    background-color: #fff;
    display: flex;
    line-height: 2.25rem;
    justify-content: space-around;
     .sort{
      font-size: 16px;
      color: #333;
      &.active{
        color: #ff734c;
      }
      &.price{
        position: relative;
        .angle{
          width: 0;
          height: 0;
          border: 4px solid transparent;
          position: absolute;
          right: -12px;
          &.up{
            border-bottom-color: #333;
            top: 10px;
            &.active{
               border-bottom-color: #ff734c;
            }
          }
          &.down{
            border-top-color: #333;
            top: 22px;
             &.active{
               border-top-color: #ff734c;
            }
          }
        }
      }
    }
  }
}
</style>
